<template>
	<view class="order-container">
		<!-- Course Information -->
		<view class="course-info">
			<view class="course-content">
				<view class="course-image">
					<u-image :src="courseInfo.url" mode="aspectFill" width="200rpx" height="200rpx" radius="12"></u-image>
				</view>
				<view class="course-details">
					<text class="course-title">{{courseInfo.courseName}}</text>
					<view class="detail-item">
						<text class="label">课程类型</text>
						<text class="value">{{courseInfo.courseType}}</text>
					</view>
					<view class="detail-item">
						<text class="label">课程学时</text>
						<text class="value">{{courseInfo.hours}}</text>
					</view>
					<view class="detail-item">
						<text class="label">开课时间</text>
						<text class="value">{{courseInfo.startTime}}</text>
					</view>
					
				</view>
			</view>
		</view>

		

		<!-- Payment Information -->
		<view class="payment-info">
			<view class="section-title">支付信息</view>
			<view class="payment-details">
				<view class="payment-item">
					<text class="label">课程费用</text>
					<text class="value">¥{{courseInfo.price}}</text>
				</view>
				
				<view class="payment-item total">
					<text class="label">实付金额</text>
					<text class="value">¥{{actualPrice}}</text>
				</view>
			</view>
		</view>

		<!-- Submit Button -->
		<view class="submit-section">
			<u-button type="primary" text="提交订单" @click="submitOrder" :loading="submitting"></u-button>
		</view>
	</view>
</template>

<script>
	import { getCourse } from '@/api/course.js'
	
	export default {
		data() {
			return {
				courseInfo: {
					courseName: '',
					courseType: '',
					hours: '',
					startTime: '',
					price: 0
				},
				studentInfo: {
					name: '',
					phone: '',
					school: '',
					grade: ''
				},
				discount: 0,
				submitting: false
			}
		},
		computed: {
			actualPrice() {
				return (this.courseInfo.price - this.discount).toFixed(2)
			}
		},
		onLoad(options) {
			if (options.courseId) {
				this.getCourseInfo(options.courseId)
			}
		},
		methods: {
			getCourseInfo(courseId) {
				const data = {
					courseId: courseId
				}
				getCourse(data).then(res => {
					this.courseInfo = res.data.course
				})
			},
			submitOrder() {
				
				this.submitting = true
				// TODO: Implement order submission logic
				setTimeout(() => {
					this.submitting = false
					uni.showToast({
						title: '订单提交成功',
						icon: 'success'
					})
				}, 1500)
				
				uni.navigateTo({
					url: '/pages/order/order'
				});
			},
			
		}
	}
</script>

<style lang="scss" scoped>
.order-container {
	min-height: 100vh;
	background-color: #f8f8f8;
	padding: 20rpx;
	padding-bottom: 140rpx;
}

.course-info {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
	
	.course-content {
		display: flex;
		gap: 24rpx;
		
		.course-image {
			flex-shrink: 0;
		}
		
		.course-details {
			flex: 1;
			min-width: 0;
			
			.course-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 20rpx;
				display: block;
			}
			
			.detail-item {
				display: flex;
				justify-content: space-between;
				margin-bottom: 16rpx;
				
				&:last-child {
					margin-bottom: 20rpx;
				}
				
				.label {
					font-size: 28rpx;
					color: #666;
				}
				
				.value {
					font-size: 28rpx;
					color: #333;
				}
			}
			
			.price-tag {
				display: inline-flex;
				align-items: baseline;
				background-color: #f0f9ff;
				padding: 8rpx 20rpx;
				border-radius: 30rpx;
				
				.price-label {
					font-size: 24rpx;
					color: #2979ff;
					margin-right: 4rpx;
				}
				
				.price-value {
					font-size: 32rpx;
					font-weight: bold;
					color: #2979ff;
				}
			}
		}
	}
}

.student-info {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 24rpx;
	}
	
	.info-form {
		.form-item {
			margin-bottom: 24rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.label {
				font-size: 28rpx;
				color: #666;
				margin-bottom: 12rpx;
				display: block;
			}
			
			input {
				width: 100%;
				height: 80rpx;
				background-color: #f8f8f8;
				border-radius: 8rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
				color: #333;
			}
		}
	}
}

.payment-info {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 24rpx;
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 24rpx;
	}
	
	.payment-details {
		.payment-item {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.label {
				font-size: 28rpx;
				color: #666;
			}
			
			.value {
				font-size: 28rpx;
				color: #333;
				
				&.discount {
					color: #ff4d4f;
				}
			}
			
			&.total {
				margin-top: 20rpx;
				padding-top: 20rpx;
				border-top: 1px solid #eee;
				
				.label {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}
				
				.value {
					font-size: 36rpx;
					font-weight: bold;
					color: #ff4d4f;
				}
			}
		}
	}
}

.submit-section {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20rpx 30rpx;
	background-color: #fff;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	
	:deep(.u-button) {
		height: 88rpx;
		font-size: 32rpx;
	}
}
</style>
